@import "./variables";
// colors map类型 或者是list
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}
// text
@each $var in (left, right, center) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

@each $size-key, $size in $font-sizes {
  .fs-#{$size-key} {
    font-size: $size * $base-font-size;
  }
}

// flex布局相关
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
@each $key, $val in $flex-js {
  .jc-#{$key} {
    justify-content: $val;
  }
}

@each $key, $val in $flex-ai {
  .ai-#{$key} {
    align-items: $val;
  }
}
.flex-1 {
  flex: 1;
}
.flex-grow-1 {
  flex-grow: 1;
}

@each $typekey, $type in $spacing-types {
  @each $dirkey, $dir in $spacing-direction {
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}#{$dirkey}-#{$sizekey} {
        #{$type}-#{$dir}: $size * $spacing-base-size;
      }
      .#{$typekey}-#{$sizekey} {
        #{$type}: $size * $spacing-base-size;
      }
      .#{$typekey}l-#{$sizekey} {
        #{$type}-left: $size * $spacing-base-size;
      }
      .#{$typekey}r-#{$sizekey} {
        #{$type}-right: $size * $spacing-base-size;
      }
      .#{$typekey}x-#{$sizekey} {
        #{$type}-left: $size * $spacing-base-size;
        #{$type}-right: $size * $spacing-base-size;
      }
      .#{$typekey}y-#{$sizekey} {
        #{$type}-top: $size * $spacing-base-size;
        #{$type}-bottom: $size * $spacing-base-size;
      }
    }
  }
}

.btn {
  border: none;
  border-radius: 0.153846rem /* 2/13 */;
  font-size: map-get($font-sizes, "sm") * $spacing-base-size;
  padding: 0.2rem 0.6rem;
}

// nav
.nav {
  display: flex;
  .nav-item {
    border-bottom: 3px solid transparent;
    padding-bottom: 0.2rem;
    &.active {
      color: map-get($colors, "primary");
      border-bottom: 3px solid map-get($colors, "primary");
    }
  }
  &.nav-inverse {
    .nav-item {
      color: white;
      &.active {
        border-bottom: 3px solid map-get($colors, "white");
      }
    }
  }
}

// width height
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}

// 单行文本超出省略号
.txt-cut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 水平居中
.m0a {
  margin: 0 auto;
}

// 边框阴影
.box-shadow {
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
    0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
}
